<template>
  <div class="clientInfo">
    <div class="left-box">
      <div class="user-top">
        <div>{{ clientInfo.name }}</div>
        <div class="user-contact">{{ clientInfo.contact }}</div>
      </div>
      <div class="user-content">
        <div class="user-content-item">
          <span>意向课程：</span>
          <span>{{ clientInfo.intentCourse }}</span>
        </div>
        <div class="user-content-item">
          <span>跟进状态：</span>
          <el-select
            v-model="clientInfo.followStatus"
            size="small"
            placeholder="请选择"
            class="search-item select"
            @change="followClick"
          >
            <el-option
              v-for="item in followStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="user-content-item">
          <span>意向度：</span>
          <span>{{ clientInfo.intention }}</span>
        </div>
        <div class="user-content-item">
          <span>跟进人：</span>
          <span>{{ clientInfo.followPerson }}</span>
        </div>
      </div>
    </div>
    <div class="right-box">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="详细信息" name="first" class="firstTab">
          <div class="client-title">学员信息</div>
          <div class="clearfix infoBox">
            <div class="info">
              <span>学员姓名：</span>
              <span>{{ clientInfo.name }}</span>
            </div>
            <div class="info">
              <span>联系电话：</span>
              <span>{{ clientInfo.contact }}</span>
            </div>
            <div class="info">
              <span>性别：</span>
              <span>{{ clientInfo.sex=='man'?'男':'女' }}</span>
            </div>
            <div class="info">
              <span>微信号：</span>
              <span>{{ clientInfo.wechat }}</span>
            </div>
            <div class="info">
              <span>生日：</span>
              <span>{{ clientInfo.birthday }}</span>
            </div>
            <div class="info">
              <span>年级：</span>
              <span>{{ clientInfo.grade }}</span>
            </div>
            <div class="info">
              <span>联系地址：</span>
              <span>{{ clientInfo.address }}</span>
            </div>
          </div>
          <div class="clearfix infoBox second">
            <div class="client-title">销售信息</div>
            <div class="info">
              <span>来源渠道：</span>
              <span>{{ clientInfo.source }}</span>
            </div>
            <div class="info">
              <span>意向课程：</span>
              <span>{{ clientInfo.intentCourse }}</span>
            </div>
            <div class="info">
              <span>意向度：</span>
              <span>{{ clientInfo.intention }}</span>
            </div>
            <div class="info">
              <span>跟进人：</span>
              <span>{{ clientInfo.followPerson }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="沟通动态" name="second" class="secondTab">
          <div class="title">添加沟通记录</div>
          <el-input v-model="dynamic" :rows="4" type="textarea" placeholder="请输入跟进中的沟通状态" />
          <div class="issued-box">
            <div class="left-set">
              <span>沟通类型</span>
              <el-select v-model="consult" placeholder="请选择">
                <el-option
                  v-for="item in consultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="right-set">
              <el-button type="primary" @click="issuedClick">发 布</el-button>
            </div>
          </div>
          <div class="title">沟通记录</div>
          <div v-for="(item, index) in dynamisList" :key="index" class="list-item">
            <div class="top">
              <div>{{ item.operator }}</div>
              <div>{{ item.addTime }}</div>
              <div>{{ item.consult }}</div>
            </div>
            <div class="content">{{ item.content }}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改日志" name="thirdly" class="thirdlyTab">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
              placement="top"
            >
              <el-card>
                <h4>{{ activity.content }}</h4>
                <p>{{ activity.executor }} 提交于 {{ activity.timestamp }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="课程" name="fourthly">
          <el-table
            :data="scheduleTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            style="width: 100%;"
          >
            <el-table-column prop="course" label="课程" align="center" />
            <el-table-column prop="status" label="状态" align="center" />
            <el-table-column prop="validity" label="有效期" align="center" />
            <el-table-column prop="hour" label="课时" align="center" />
            <el-table-column prop="class" label="班级" align="center" />
          </el-table>
          <div class="block" style="margin:20px 0;">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              :total="scheduleTableData.length"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentId: '',
      activeName: 'first',
      // 默认显示用户信息数据
      clientInfo: {
        name: '刘德华',
        contact: '15811583698',
        intentCourse: '语文作文',
        followStatus: '待跟进',
        intention: '低',
        followPerson: '15132116548',
        birthday: '2000-06-03',
        sex: 'man',
        wechat: '131311313',
        territory: ['北京市', '市辖区', '海淀区'],
        address: '知春路',
        studentNum: 'S2019080515',
        grade: '高三'
      },
      followStatusOptions: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '待跟进',
          label: '待跟进'
        },
        {
          value: '跟进中',
          label: '跟进中'
        },
        {
          value: '已邀约',
          label: '已邀约'
        },
        {
          value: '已试听',
          label: '已试听'
        },
        {
          value: '已成交',
          label: '已成交'
        },
        {
          value: '无效',
          label: '无效'
        }
      ],
      // 沟通动态数据
      dynamic: '',
      consult: '',
      consultOptions: [
        {
          value: '电话沟通',
          label: '电话沟通'
        },
        {
          value: '微信沟通',
          label: '微信沟通'
        },
        {
          value: '短信沟通',
          label: '短信沟通'
        }
      ],
      dynamisList: [
        {
          operator: '15093685231(创建人)',
          addTime: '2019-08-21 09:33:55',
          consult: '电话沟通',
          content: '待再次沟通'
        }
      ],
      // 日志
      activities: [
        {
          content: '活动按期开始',
          executor: '李帅',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          executor: '王晓高',

          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          executor: '张甜',
          timestamp: '2018-04-11'
        }
      ],
      // 课程
      currentPage: 1,
      pageSize: 5,
      scheduleTableData: [
        {
          course: '语文作文',
          status: '已开启',
          validity: '2019-06-06',
          hour: '13',
          class: '2班'
        }
      ]
    }
  },
  mounted() {
    this.studentId = this.$route.params.studentNum
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    showUserEdit(id) {
      this.clientInfoDialog = true
    },
    goAppoint() {
      this.$router.push({ name: 'Appointment' })
    },
    // 更改跟进状态
    followClick(val) {
      this.$message({
        type: 'success',
        message: '修改成功'
      })
    },
    // 发布沟通状态
    issuedClick() {
      if (!this.dynamic) {
        this.$message({
          type: 'warning',
          message: '请输入沟通内容'
        });

      } else if (!this.consult) {
        this.$message({
          type: 'warning',
          message: '请选择沟通类型'
        });

      } else {
        this.dynamisList.push(
          {
            operator: '15093685231(创建人)',
            addTime: this.getNowFormatDate(),
            consult: this.consult,
            content: this.dynamic
          }
        );
        this.dynamisList = this.dynamisList.reverse();
        this.dynamic = ''
      }
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = '-';
      var seperator2 = ':';
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      return date.getFullYear() + seperator1 + month + seperator1 + strDate +
        ' ' + date.getHours() + seperator2 + date.getMinutes() +
        seperator2 + date.getSeconds()
    }
  }
}
</script>

<style lang="scss" scoped>
.clientInfo {
  padding: 20px;
  display: flex;
  .clearfix {
    display: block;
  }
  .left-box {
    border-right: 1px solid #eee;
    width: 256px;
    flex-shrink: 0;
    .user-top {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #eee;
      .user-contact {
        color: #767676;
        font-size: 12px;
        margin-top: 16px;
      }
    }
    .user-content {
      padding: 20px;
      color: #767676;
      font-size: 12px;
      .user-content-item {
        margin-bottom: 12px;
      }
      .select {
        width: 120px;
      }
    }
  }
  .right-box {
    flex-grow: 1;
    padding: 0 20px;
    .search-box {
      display: flex;
      margin: 20px 0;
      .search-item {
        margin-right: 20px;
      }
    }
    .firstTab {
      padding: 20px;
      .client-title {
        margin-bottom: 6px;
        color: #353535;
        font-weight: bold;
        font-size: 14px;
        line-height: 20px;
      }
      .infoBox {
        width: 650px;
        .info {
          display: flex;
          float: left;
          padding: 6px 0;
          line-height: 22px;
          color: #353535;
          font-weight: 400;
          font-size: 14px;
          span:first-child {
            min-width: 70px;
          }
          span:last-child {
            min-width: 150px;
          }
        }
      }
      .infoBox.second {
        margin-top: 40px;
      }
    }
    .secondTab {
      .title {
        margin-bottom: 6px;
        color: #353535;
        font-weight: bold;
        font-size: 14px;
        line-height: 20px;
      }
      .issued-box {
        display: flex;
        padding: 20px 0;
        justify-content: space-between;
        align-items: center;
        .left-set {
          span {
            margin-right: 20px;
          }
        }
      }
      .list-item {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #d4d4d4;
        border-radius: 8px;
        .top {
          display: flex;
          justify-content: space-between;
          color: #676767;
          div:first-child {
            color: #272626;
          }
        }
        .content {
          margin-top: 20px;
          font-weight: bold;
        }
      }
    }
    .thirdlyTab {
      padding: 20px;
    }
  }
}
</style>
